<template>
  <h1>Css</h1>
  <p>1. 如果isRight为true，则添加right类名，否则添加error类型(用computed解决)</p>
  <h2>这道题是什么颜色<span class="default" :class="classObject">hello world</span></h2>
  <button @click="isRight = !isRight">修改状态</button>
  <button @click="fontSize++">变大字体大小</button>
  <h2 :style="{ 'font-size': fontSize + 'px' }">我现在的字体大小是{{ fontSize }}</h2>
</template>

<script setup>
import { ref, computed } from 'vue'

const isRight = ref(true)

const classObject = computed(() => ({
  'right': isRight.value,
  'error': !isRight.value
}))

const fontSize = ref(16)
</script>
<script>
export default {
  name: ''
}
</script>

<style scoped>
.default {
  font-weight: 900;
}

.right {
  color: green;
}

.error {
  color: red;
}
</style>